<template>
	<div class="goods">

     <el-row>
         <el-col :span="6">
     		<el-button @click="ofirst" style="width: 100px;margin-left: -240px;">待收费</el-button>
     	</el-col>
     	<el-col :span="6">
     		<el-button @click="otwo" style="width: 100px;margin-left: -740px;">已收费</el-button>
     	</el-col>
     	<el-col :span="6">
     		<el-button @click="othree" style="width: 100px;margin-left: -1238px;">已退费</el-button>
         </el-col>
     </el-row>

		<el-form :model="cxform" inline>
			<el-form-item label="订单类型">
				<el-select v-model="cxform.indentsId" placeholder="请选择活动区域" clearable>
					<el-option v-for="g in indentstable" :label="g.dtype" :value="g.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="订单编号">
				<el-input v-model="cxform.aaaa" placeholder="请输入订单编号/患者姓名"></el-input>
			</el-form-item>
			<el-form-item label="创建时间">
				<el-date-picker v-model="cxform.createtime" type="daterange" align="right" unlink-panels range-separator="至"
				 start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button @click="cx">查询</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="table">
			<el-table-column prop="id" label="序号"></el-table-column>
			<el-table-column prop="dnumber" label="订单编号"></el-table-column>
			<el-table-column prop="dtype" label="订单类型"></el-table-column>
			<el-table-column prop="name" label="患者姓名"></el-table-column>
			<el-table-column prop="serialnumber" label="患者卡号"></el-table-column>
			<el-table-column label="性别">
				<template v-slot="scope">
					{{scope.row.sex==0?'女':'男'}}
				</template>
			</el-table-column>
			<el-table-column prop="age" label="年龄"></el-table-column>
			<el-table-column prop="phone" label="手机号码"></el-table-column>
			<el-table-column prop="subname" label="科室"></el-table-column>
			<el-table-column prop="docname" label="接诊医生"></el-table-column>
			<el-table-column prop="createtime" label="创建时间"></el-table-column>
			<el-table-column prop="receivable" label="应收金额"></el-table-column>
			<el-table-column prop="receipts" label="实收金额"></el-table-column>
			<el-table-column prop="hname" label="支付方式"></el-table-column>
			<el-table-column label="收费状态">
				<template v-slot="scope">
					<span v-if="scope.row.states==0">待收费</span>
					<span v-if="scope.row.states==1">已收费</span>
					<span v-if="scope.row.states==2">已退费</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template v-slot="scope">
					<el-button @click="ck(scope.row)">查看</el-button>
					<el-button @click="tf(scope.row)">退费</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo"
		 :page-sizes="sizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				indentstable: [],
				table: [],
				pageNo: 1,
				pageSize: 3,
				sizes: [3, 5, 8],
				total: 0,
				cxform: {
					indentsId: '',
					aaaa: '',
					createtime: []
				}
			}
		},
		created: function() {
			this.initData();
			this.initIndents();
		},
		methods: {
			tf(){
				this.$router.push("/Premium");
			},
			ck(){
				this.$router.push("/Hascharge");
			},
			ofirst(){
				this.$router.push("/About");
			},
			otwo(){
				this.$router.push("/Goods");
			},
			othree(){
				this.$router.push("/User");
			},
			openbj(){
				this.$router.push("/Prescription");
			},
			cx() {
				this.initData();
			},
			initIndents() {
				this.axios.get('http://localhost:9090/indents/indentslist').then((res) => {
					this.indentstable = res.data;
				})
			},
			initData() {
				this.axios.get('http://localhost:9090/sickperson/yslist', {
					params: {
						current: this.pageNo,
						size: this.pageSize,
						indentsId: this.cxform.indentsId,
						aaaa: this.cxform.aaaa,
						ct1: this.cxform.createtime ? this.cxform.createtime[0] : '',
						ct2: this.cxform.createtime ? this.cxform.createtime[1] : ''
					}
				}).then((res) => {
					this.table = res.data.obj.records;
					this.total = res.data.obj.total;
				})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.initData();
			},
			handleCurrentChange(val) {
				this.pageNo = val;
				this.initData();
			}
		}
	}
</script>

<style>

</style>
